﻿@{
    
    Layout = null;
}
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="~/img/animated_favicon1.gif">
<link href="~/UILibs/easyui/themes/default/easyui.css" rel="stylesheet" />
<link href="~/UILibs/easyui/themes/icon.css" rel="stylesheet" />
<link href="~/Css/css.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.jqprint-0.3.js"></script>
<script src="~/UILibs/easyui/jquery.easyui.min.js"></script>

<script src="~/UILibs/easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/echarts.common.min.js"></script>

    <script type="text/javascript">

        $(function () {
            $("#shopName").combobox({
                url: '/SupportNumShelf/GetShop',
                valueField: "shopID",
                textField: "shopName"
            });
        })
        </script>

<script type="text/javascript">
    function searchData() {
        
        var start = $("#txtDate1").datebox('getValue');
        var end = $("#txtDate2").datebox('getValue');
        //alert(start);
        //if (start == null || end == null || end == "" || end == "") {

        //    alert("开始日期和结束时间不能为空");
        //    txtDate1.focus();
        //    return false;
        //}
         if (txtDate1.value > txtDate2.value) {

            alert("开始日期不能大于截至日期！");
            $("#txtDate1").datebox('setValue', "");//根据ID清空输入的时间
            $("#txtDate2").datebox('setValue', "");//根据ID清空
            txtDate1.focus();
            txtDate2.focus();
            return false;
        }
        else {    //storeid 
             $.post("/AvgMoneyRateChart/PerCustomerPriceBy2?date1=" + $("#txtDate1").val() + '&date2=' + $('#txtDate2').val() + '&storeid=' + $('#shopName').val(),
            function (result) {
                alert(result);
                var Date = [];
                var AvgRate = [];
                var AllRate = [];
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                $.each(result, function (index, item) {
                    //挨个取出类别并填入类别数 shopName PerPrice  
                    Date.push(item.Date);
                    AvgRate.push(item.AvgRate);
                    AllRate.push(item.AllRate);
                });
                var colors = ['#5793f3', '#d14a61', '#675bba'];
                option = {
                    color: colors,
                    backgroundColor: '#eee',
                    legend: {
                        data: ['总利润', '平均利润', ],
                    },
                    title: {
                        text: '总利润/平均利润',
                        //subtext: '按日期统计'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    grid: {
                        right: '20%'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            boundaryGap: false,
                            data: Date //['周一', '周二', '周三', '周四', '周五', '周六', '周日'],//
                        }
                    ],
                    yAxis: [
                        //{
                        //    type: 'value'
                        //}

                          {
                              type: 'value',
                              name: '总利润',
                              min: 0,
                              max: 500,
                              position: 'right',
                              axisLine: {
                                  lineStyle: {
                                      color: colors[0]
                                  }
                              },
                          },
                          {
                              type: 'value',
                              name: '平均利润',
                              min: 0,
                              max: 150,
                              position: 'left',
                              axisLine: {
                                  lineStyle: {
                                      color: colors[1]
                                  }
                              },
                          }
                    ],
                    series: [
                               {
                                   name: '总利润',
                                   type: 'line',
                                   barWidth: '20%',
                                   //yAxisIndex:1,
                                   data: AllRate
                               },
                               {
                                   name: '平均利润',
                                   barWidth: '20%',
                                   type: 'line',
                                   yAxisIndex: 1,
                                   data: AvgRate
                               },
                    ]
                };
                var myChart = echarts.init(document.getElementById('main'));
                myChart.setOption(option);

            })
            $("#txtDate1").datebox('setValue', "");//根据ID清空输入的时间
            $("#txtDate2").datebox('setValue', "");//根据ID清空  margin-left: 100px;
        } 
    }
</script>



<body class="" style="width: 100%; height: 100%">

    <div id="tool" style="padding-left: 100px; margin-top: 20px">
        <p><span style="font-size: larger; color: brown; margin-top: initial;">请选择起始日期进行统计:</span></p>
        <input id="txtDate1" type="text" class="easyui-datebox" />
        ---
                <input id="txtDate2" type="text" class="easyui-datebox" onchange="searchData()" />
        &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
          选择店铺：  <input id="shopName" class="easyui-combobox" name="shopName"  />
        &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
                  <a class="easyui-linkbutton" iconcls="icon-search" onclick="searchData()">统计</a>
        <span style="font-size: larger; color: red">&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp  </span>
    </div>
    <div data-options="region:'center'">
        <div data-options="region:'center'" style="width:700px; height: 350px;  margin-top: 20px" id="main">
        </div>


    </div>
    <script type="text/javascript">   
        $.post('/AvgMoneyRateChart/PerCustomerPriceBy2',
          function (result) {
              alert(result);
              var Date = [];
              var AvgRate = [];
              var AllRate = [];
              //请求成功时执行该函数内容，result即为服务器返回的json对象
              $.each(result, function (index, item) {
                  //挨个取出类别并填入类别数 shopName PerPrice
                  Date.push(item.Date);
                  AvgRate.push(item.AvgRate);
                  AllRate.push(item.AllRate);
              });
              Date = Date.reverse();
              AvgRate = AvgRate.reverse();
              AllRate = AllRate.reverse();
        var colors = ['#5793f3', '#d14a61', '#675bba'];
        option = {
                  color: colors,
                  backgroundColor: '#eee',
                  legend: {
                      data: ['总利润', '平均利润', ],
                  },
                  title: {
                      text: '总利润/平均利润',
                      //subtext: '按日期统计'
                  },
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {
                          type: 'cross'
                      }
                  },
                  grid: {
                      right: '20%'
                  },
                  toolbox: {
                      show: true,
                      feature: {
                          mark: { show: true },
                          dataView: { show: true, readOnly: false },
                          magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                          restore: { show: true },
                          saveAsImage: { show: true }
                      }
                  },
                  calculable: true,
                  xAxis: [
                      {
                          type: 'category',
                          axisTick: {
                              alignWithLabel: true
                          },
                          boundaryGap: false,
                          data: Date //['周一', '周二', '周三', '周四', '周五', '周六', '周日'],//
                      }
                  ],
                  yAxis: [
                      //{
                      //    type: 'value'
                      //}

                        {
                            type: 'value',
                            name: '总利润',
                            min: 0,
                            max: 500,
                            position: 'right',
                            axisLine: {
                                lineStyle: {
                                    color: colors[0]
                                }
                            },
                        },
                        {
                            type: 'value',
                            name: '平均利润',
                            min: 0,
                            max: 150,
                            position: 'left',                          
                            axisLine: {
                                lineStyle: {
                                    color: colors[1]
                                }
                            },
                        }
                  ],
                  series: [
                             {
                                 name: '总利润',
                                 type: 'line',
                                 barWidth: '20%',
                                 //yAxisIndex:1,
                                 data: AllRate
                             },
                             {
                                 name: '平均利润',
                                 barWidth: '20%',
                                 type: 'line',
                                 yAxisIndex:1,
                                 data:AvgRate
                             },
                  ]
              };
              var myChart = echarts.init(document.getElementById('main'));
              myChart.setOption(option);
              
        })

    </script>

</body>

